<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcGIS JS API Example</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.26/"></script>
</head>

<body class=" Esri-Theme--Light">
    <div id="viewDiv" style="width: 100%; height: 100vh;"></div>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/renderers/SimpleRenderer",
            "esri/renderers/UniqueValueRenderer",
        ], function (Map, MapView, FeatureLayer, Graphic, Point, SimpleMarkerSymbol, SimpleRenderer, UniqueValueRenderer) {

            // 创建地图
            var map = new Map({
                basemap: "streets-navigation-vector"
            });

            // 创建视图
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [104.065735, 30.659462], // 经度，纬度
                zoom: 10 // 缩放级别
            });

            // 模拟数据
            var mockData = [
                { name: "点1", description: "这是点1", type: '1', longitude: 104.065735, latitude: 30.659462 },
                { name: "点2", description: "这是点2", type: '1', longitude: 104.067735, latitude: 30.661462 },
                { name: "点3", description: "这是点3", type: '1', longitude: 104.066735, latitude: 30.662462 },
                { name: "点4", description: "这是点4", type: '1', longitude: 104.068735, latitude: 30.663462 },
                { name: "点5", description: "这是点5", type: '2', longitude: 104.069735, latitude: 30.664462 },
                { name: "点6", description: "这是点6", type: '2', longitude: 104.070735, latitude: 30.665462 },
                { name: "点7", description: "这是点7", type: '2', longitude: 104.071735, latitude: 30.666462 },
                { name: "点8", description: "这是点8", type: '2', longitude: 104.072735, latitude: 30.667462 }
            ];
            const clusterConfig = {

                type: "cluster", // 使用聚合
                clusterRadius: "100px", // 聚合半径
                clusterMinSize: "30px", // 最小聚合大小
                clusterMaxSize: "60px", // 最大聚合大小
                fieldInfos: [
                    {
                        fieldName: "cluster_count",
                        format: {
                            places: 0,
                            digitSeparator: true
                        }
                    }],
                // 聚合点字体
                labelingInfo: [
                    {
                        deconflictionStrategy: "none",
                        labelExpressionInfo: {
                            expression: "Text($feature.cluster_count, '#,###')"
                        },
                        symbol: {
                            type: "text",
                            color: "white",
                            font: {
                                weight: "bold",
                                family: "Noto Sans",
                                size: "18px"
                            },
                            haloSize: 1
                        },
                        labelPlacement: "center-center"
                    }
                ],
                // renderer: {
                //     type: "simple",
                //     symbol: {
                //         type: "simple-marker",
                //         size: 4,
                //         color: "#69dcff",
                //         outline: {
                //             color: "rgba(0, 139, 174, 0.5)",
                //             width: 5
                //         }
                //     }
                // },

            }
            // 创建 FeatureLayer
            var featureLayer = new FeatureLayer({
                featureReduction: clusterConfig,
                fields: [
                    { name: "name", type: "string", alias: "名称" },
                    { name: "description", type: "string", alias: "描述" },
                    { name: "type", type: "string", alias: "类型" },
                ],
                objectIdField: "ObjectID",
                //确保 view.on "click"显示以上fields所有字段
                outFields: ["*"],
                geometryType: "point",
                spatialReference: { wkid: 4326 },
                popupTemplate: {
                    title: "{name}--{type}",
                    content: "{description}"
                },
                source: [], // 初始化为空
                // renderer: {
                //     type: "simple",
                //     symbol: {
                //         type: "simple-marker",
                //         size: 4,
                //         color: "#69dcff",
                //         outline: {
                //             color: "rgba(0, 139, 174, 0.5)",
                //             width: 5
                //         }
                //     }
                // },
                // renderer: {
                //     type: "simple",
                //     symbol: {
                //         type: "picture-marker",
                //         url: "https://arcgis.github.io/arcgis-samples-javascript/sample-data/layers-ogcfeaturelayer/windmill.png",
                //         // url:  "http://192.168.3.92:8019/dxsk.png",
                //         width: "20px",
                //         height: "20px"
                //     }
                // }
            });
            // 定义渲染器
            var uniqueValueRenderer = new UniqueValueRenderer({
                field: "type", // 根据字段类型进行渲染
                defaultSymbol: new SimpleMarkerSymbol({
                    color: "red",
                    size: "10px"
                }),
                uniqueValueInfos: [
                    {
                        value: "1",
                        symbol: {
                            type: "picture-marker",
                            //url: "https://arcgis.github.io/arcgis-samples-javascript/sample-data/layers-ogcfeaturelayer/windmill.png",
                            url:  "/tl_shk1.png",
                            width: "15px",
                            height: "15px"
                        },
                        label: "Type 1"
                    },
                    {
                        value: "2",
                        symbol: new SimpleMarkerSymbol({
                            color: "blue",
                            size: "10px"
                        }),
                        label: "Type 2"
                    }

                ]
            });

            // 将渲染器应用到图层
            featureLayer.renderer = uniqueValueRenderer;
            // 将 FeatureLayer 添加到地图
            map.add(featureLayer);

            // 添加模拟数据到 FeatureLayer
            let points = []
            mockData.forEach(function (data) {
                var point = new Point({
                    longitude: data.longitude,
                    latitude: data.latitude
                });

                var pointGraphic = new Graphic({
                    geometry: point,
                    //attributes中属性 layer fields可以声明调用
                    attributes: data
                    // symbol: new SimpleMarkerSymbol({
                    //     color: "red",
                    //     size: "20px"
                    // })
                });

                points.push(pointGraphic)
            });
            featureLayer.applyEdits({
                addFeatures: points
            }).then(function (result) {
                console.log("点已添加:", result);
            }).catch(function (error) {
                console.error("添加点时出错:", error);
            });

            // 添加点击事件
            view.on("click", function (event) {
                // 使用 hitTest 方法查找点击的要素
                view.hitTest(event).then(function (response) {
                    // 检查是否点击到要素
                    if (response.results.length > 0) {
                        var graphic = response.results[0].graphic; // 获取点击的图形
                        var attributes = graphic.attributes; // 获取属性
                        console.log("attributes", attributes)
                        // 创建弹出窗口并设置内容
                        // var popupContent = "点击的要素: <br>" + JSON.stringify(attributes, null, 2);
                        // view.popup.open({
                        //     title: "要素信息",
                        //     content: popupContent,
                        //     location: event.mapPoint // 弹出窗口位置
                        // });
                    }
                });
            });
        });
    </script>
</body>

</html>